<div ng-include="'app/layout/FABGoBack.html'"></div>
<section id="dashboard-view" class="mainbar layout layout-wrap" layout="column" layout-align="sapce-around">
    <md-content>

        <div class="layout layout-row layout-wrap" layout="row" layout-align="space-around center" flex>
            <h2 flex="80">Advanced Search</h2>

            <div class="layout layout-row layout-wrap" layout="row" layout-align="space-between center">
                <md-button class="md-primary md-fab md-mini" aria-label="Add" ng-click="vm.ToggleFilters()">
                    <md-icon md-font-library="material-icons" ng-if="vm.FilterVisible">&#xE888;</md-icon>
                    <md-tooltip ng-if="vm.FilterVisible">Hide Filters</md-tooltip>
                    <md-icon md-font-library="material-icons" ng-if="!vm.FilterVisible">&#xE417;</md-icon>
                    <md-tooltip ng-if="!vm.FilterVisible">Show Filters</md-tooltip>
                </md-button>
                <md-button class="md-primary md-fab md-mini" aria-label="Print" ng-click="vm.PrintReport()">
                    <md-icon md-font-library="material-icons">&#xE8AD;</md-icon>
                    <md-tooltip>Print Report</md-tooltip>
                </md-button>
            </div>

        </div>
        <div class="layout layout-row layout-wrap" layout="row" layout-align="space-around center" flex>
            <md-card class="layout layout-fill md-whiteframe-9dp DemoCard">
                <div class="layout layout-row layout-wrap" layout="row" layout-align="space-around center" ng-show="vm.FilterVisible">
                    <div class="layout" layout="column" layout-align="space-between center" flex>
                        <h4>Date Range</h4>
                        <label>From Date:</label><md-datepicker class="md-icon-float md-block md-accent" md-max-date="vm.maxDate" md-open-on-focus ng-model="vm.FromDate" name="FromDate"></md-datepicker><br />
                        <label>To Date:</label><md-datepicker class="md-icon-float md-block md-accent" md-max-date="vm.maxDate" md-min-date="vm.FromDate" md-open-on-focus ng-model="vm.ToDate" name="ToDate"></md-datepicker>
                    </div>

                    <div class="layout" layout="column" layout-align="space-around center" flex>
                        <h4>Referral Type</h4>
                        <md-radio-group ng-model="vm.ReferralType">
                            <md-radio-button value="All">All</md-radio-button>
                            <md-radio-button value="RefIn">Referral-In</md-radio-button>
                            <md-radio-button value="RefOut">Referral-Out</md-radio-button>
                        </md-radio-group>
                    </div>

                    <div class="layout" layout="column" layout-align="space-between center" flex>
                        <h4>Referral Status</h4>
                        <md-radio-group ng-model="vm.ReferralStatus">
                            <md-radio-button value="All">All</md-radio-button>
                            <md-radio-button value="New">New</md-radio-button>
                            <md-radio-button value="In-Process">In-Process</md-radio-button>
                            <md-radio-button value="Scheduled">Scheduled</md-radio-button>
                            <md-radio-button value="Complete">Completed</md-radio-button>
                        </md-radio-group>
                    </div>

                    <div class="layout" layout="column" layout-align="space-between stretch" flex>
                        <h4>Practice</h4>
                        <md-input-container class="md-block" flex>
                            <label>From Practice</label>
                            <md-select name="cmbFromPractice" ng-model="vm.FromPractice" ng-change="vm.GetPracticeByID(vm.FromPractice,'from')">
                                <md-option value="All">All</md-option>
                                <md-option ng-repeat="Prac in vm.PracticesList" value="{{Prac.PracticeID}}">
                                    {{Prac.PracticeName}}
                                </md-option>
                            </md-select>
                        </md-input-container>

                        <md-input-container class="md-block" flex>
                            <label>To Practice</label>
                            <md-select name="cmbToPractice" ng-model="vm.ToPractice" ng-change="vm.GetPracticeByID(vm.ToPractice,'to')">
                                <md-option value="All">All</md-option>
                                <md-option ng-repeat="Prac in vm.PracticesList" value="{{Prac.PracticeID}}">
                                    {{Prac.PracticeName}}
                                </md-option>
                            </md-select>
                        </md-input-container>
                    </div>

                    <div class="layout" layout="column" layout-align="space-between stretch" flex>
                        <h4>Physician</h4>
                        <md-input-container class="md-icon-float md-block md-accent" flex>
                            <label>Referring Physician</label>
                            <md-select name="cmbPhysician" class="md-accent" ng-model="vm.ReferringPhysician" ng-change="vm.GetPhysicianByID(vm.ReferringPhysician,'from')">
                                <md-option value="All">All</md-option>
                                <md-option ng-repeat="Phy in vm.Physicians | filter : vm.FilterFromPhysician" value="{{Phy.PhysicianID}}">
                                    {{Phy.PhysicianName}}
                                </md-option>
                            </md-select>
                        </md-input-container>

                        <md-input-container class="md-icon-float md-block md-accent" flex>

                            <label>Referred Physician</label>
                            <md-select name="cmbReferredPhysician" class="md-accent" ng-model="vm.ReferredPhysician" ng-change="vm.GetPhysicianByID(vm.ReferredPhysician,'to')">
                                <md-option value="All">All</md-option>
                                <md-option ng-repeat="Phy in vm.Physicians | filter : vm.FilterToPhysician" value="{{Phy.PhysicianID}}">
                                    {{Phy.PhysicianName}}
                                </md-option>
                            </md-select>
                        </md-input-container>
                    </div>
                </div>
                <div layout="row" layout-align="end center" flex ng-show="vm.FilterVisible"><md-button class="md-raised md-primary" ng-click="vm.GetFilteredReferrals()">SEARCH</md-button></div>

                <md-divider></md-divider>
                <div class="layout layout-wrap" layout="column" layout-align="space-around center">
                    <br />
                    <br />
                    <p ng-if="vm.SearchCount > 0">Total no of Records: {{vm.SearchCount}}</p>
                </div>

                <div class="layout layout-wrap" layout="column">
                    <md-table-container>
                        <table md-table md-row-select md-auto-select ng-model="vm.SelectReferral" md-progress="promise">
                            <thead md-head>
                                <tr md-row>
                                    <th md-column><span>Patient Name</span></th>
                                    <th md-column><span>Created Date</span></th>
                                    <th md-column>Current Status</th>
                                    <th md-column>Referring Physician</th>
                                    <th md-column>Referred Physician</th>
                                </tr>
                            </thead>
                            <tbody md-body>
                                <tr md-row md-select="Referral.ReferralID" md-select-id="{{Referral.ReferralID}}" md-on-select="vm.OnReferralSelect" md-auto-select ng-repeat="Referral in vm.FilteredReferrals">
                                    <td md-cell>{{Referral.PatientName}}</td>
                                    <td md-cell>{{Referral.CreatedDate}}</td>
                                    <td md-cell>{{Referral.CurrentStatus}}</td>
                                    <td md-cell>{{Referral.ReferringPhysician}}</td>
                                    <td md-cell>{{Referral.ReferredPhysician}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </md-table-container>

                    <md-table-pagination md-limit="10" md-limit-options="[10]" md-page="1" md-total="{{vm.SearchCount}}" md-on-paginate="vm.onPaginate" md-page-select></md-table-pagination>
                </div>

                <div id="PrintDiv" style="display:none;">
                    <p>
                        Search Criteria:<br />
                        <table border="1" style="border-style:solid; border-width:1px; border-color:black">
                            <tr style="font-weight:800;text-align:center; vertical-align:middle;border-style:solid; border-width:1px; border-color:black">
                                <td>From Date</td>
                                <td>To Date</td>
                                <td>Referral Type</td>
                                <td>Referral Status</td>
                                <td>From Practice</td>
                                <td>To Practice</td>
                                <td>From Physician</td>
                                <td>To Physician</td>
                            </tr>
                            <tr style="text-align:center; vertical-align:middle;border-style:solid; border-width:1px; border-color:black">
                                <td>{{vm.FromDateFormatted}}</td>
                                <td>{{vm.ToDateFormatted}}</td>
                                <td>{{vm.ReferralType}}</td>
                                <td>{{vm.ReferralStatus}}</td>
                                <td>{{vm.FromPracticeName}}</td>
                                <td>{{vm.ToPracticeName}}</td>
                                <td>{{vm.FromPhysicianName}}</td>
                                <td>{{vm.ToPhysicianName}}</td>

                            </tr>
                        </table>
                    </p>
                    <table border="1" style="border-style:solid; border-width:1px; border-color:black">
                        <thead>
                            <tr style="font-weight:800;text-align:center; vertical-align:middle; border-style:solid; border-width:1px; border-color:black">
                                <th><span>Patient Name</span></th>
                                <th><span>Created Date</span></th>
                                <th>Current Status</th>
                                <th>Referring Physician</th>
                                <th>Referred Physician</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="text-align:center; vertical-align:middle;border-style:solid; border-width:1px; border-color:black" ng-repeat="Referral in vm.FilteredReferrals">
                                <td>{{Referral.PatientName}}</td>
                                <td>{{Referral.CreatedDate}}</td>
                                <td>{{Referral.CurrentStatus}}</td>
                                <td>{{Referral.ReferringPhysician}}</td>
                                <td>{{Referral.ReferredPhysician}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <p>Total no of Records: {{vm.SearchCount}}</p>
                </div>
            </md-card>
        </div>
</md-content>
</section>